import React, { useEffect, useState } from 'react';
import { Button, Container, Form, Image, ListGroup, Row } from 'react-bootstrap';
import {AiTwotoneDelete} from 'react-icons/ai';
import appSetting from '../../store/AppSetting';

interface WeichatTag{
    id:String;
    name:String;
    count?:number;
}

const Tags:React.FC = (props,state)=>{
    
    const [tags,setTags] = useState<Array<WeichatTag>>([]);
    const [tagName,setTagName] = useState<String>();
    const [tagId,setTagId] = useState<String>();
    const [showDelAlert,setShowDelAlert] = useState<boolean>(false);

    const _renderListItems = ()=> {
        return tags.map((tag:WeichatTag,index)=>{
            return (<ListGroup.Item key={index.toString()}>
                    <Row>
                        <p>tag id: {tag.id}</p>
                        <p>tag name: {tag.name}</p>
                    </Row>
                    <p>tag count: {tag.count}</p>
                    {/* <Alert title='Are you sure to Delete?' status={showDelAlert} type={"error"}  onClick={()=>{
                        setShowDelAlert(false);
                        fetch( `/wxproxy/cgi-bin/tags/delete?access_token=${appSetting.accessToken}`,
                            {
                                method:"POST",
                                body:JSON.stringify({
                                    tag:{id:tag.id}
                                })
                        },                            
                        )
                        .then(res=>res.json())
                        .then((resp)=>{
                            refreshTags();
                        })
                        .catch((err)=>{
                            console.error(err)
                        });
                    }}/>
                     */}
                    <Button variant='danger' onClick={()=>{
                        setShowDelAlert(true);
                    }}><AiTwotoneDelete/></Button>
                </ListGroup.Item>)
        });
    }

    const refreshTags = ()=> {
        fetch(`/wxproxy/cgi-bin/tags/get?access_token=${appSetting.accessToken}`)
        .then(res=>res.json())
        .then((resp)=>{
            console.info("tags:"+JSON.stringify(resp));
            setTags(resp.tags||[]);
        })
        .catch((err)=>{
            console.error(err)
        })

    }

    useEffect(()=>{
        refreshTags();

    },[])

    return (<Container>
            <ListGroup>
                {_renderListItems()}
                <Container style={{display:'flex',flexDirection:"row"}}>
                        <p>添加标签</p>
                        <Form.Control type='input' placeholder='tag name' style={{width:300,marginLeft:5,marginRight:5}}
                            onChange={(e)=>{
                                setTagName(e.currentTarget.value);
                            }}
                        />
                        <Button type='button' onClick={()=>{
                             const url =  `/wxproxy/cgi-bin/tags/create?access_token=${appSetting.accessToken}`;
                             let bodyJson = JSON.stringify({
                                "tag":{
                                    "name":tagName
                                }
                            });
                            fetch(url,{
                                method:"POST",
                                body:bodyJson
                             }).then((resp)=>resp.json()).then(()=>{
                                refreshTags();
                             })
                        }}>添加</Button>

                </Container>
                <Container style={{display:'flex',flexDirection:"row"}}>
                        <p>编辑标签</p>
                        <Form.Control type='input' placeholder='tag id' style={{width:200,marginLeft:5,marginRight:5}}
                            onChange={(e)=>{
                                setTagId(e.currentTarget.value);
                            }}
                        />
                        <Form.Control type='input' placeholder='tag name' style={{width:200,marginLeft:5,marginRight:5}}
                            onChange={(e)=>{
                                setTagName(e.currentTarget.value);
                            }}
                        />
                        <Button type='button' onClick={()=>{
                             const url = `/wxproxy/cgi-bin/tags/update?access_token=${appSetting.accessToken}`;
                             let bodyJson = JSON.stringify({
                                "tag":{
                                    "name":tagName,
                                    "id":tagId
                                }
                            });
                            fetch(url,{
                                method:"POST",
                                body:bodyJson
                             }).then((resp)=>resp.json()).then(()=>{
                                alert("保存成功");
                                refreshTags();
                             })
                        }}>保存</Button>

                </Container>

            </ListGroup>
    </Container>);
}

export default Tags;